<template>
    <template v-if="show">
        <el-pagination :current-page="current" :page-size="page" :page-sizes="pageSizes" :size="size" :disabled="disabled" :background="background" :layout="layout" :total="total" @size-change="onSizeChange" @current-change="onCurrentChange" class="pagination" />
    </template>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import type { ComponentSize } from "element-plus";

//父传子
interface Props {
    data?: any;
}
const props = withDefaults(defineProps<Props>(), {
    data: null,
});

//验证参数是否存在
const show = computed(() => props?.data?.pageable?.pageSize && props?.data?.totalElements);

//当前页
const current = computed(() => props?.data?.pageable?.pageNumber + 1);

//分页大小ye size
const page = computed(() => props?.data?.pageable?.pageSize || 10);

//总页数
const total = computed(() => parseInt(props?.data?.totalElements || 0));

const pageSizes = ref([10, 20, 30, 50, 100, 200, 300, 500, 800, 1000]);
const layout = ref("total, sizes, prev, pager, next, jumper");
const size = ref<ComponentSize>("default");
const disabled = ref(false);
const background = ref(true);

//使用defineEmits注册一个自定义事件，子传父
const emit = defineEmits(["onSizeChange", "onCurrentChange"]);

//触发size改变事件
const onSizeChange = (val: number) => emit("onSizeChange", val);

//触发current改变事件
const onCurrentChange = (val: number) => emit("onCurrentChange", val);
</script>

<style scoped lang="less">
.pagination {
    float: right;
    margin-top: 10px;
    padding-right: 10px;
}
</style>
